<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>消息管理功能-topic</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body class="layui-layout-body">

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">RedisMQ</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">蒙大拿
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">Topics</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="topic-list-a">列表</a></dd>
                        <dd><a href="javascript:;">注册</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">Groups</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表</a></dd>
                        <dd><a href="javascript:;">注册</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;" id="content">
            <strong>Welcome to RedisMQ admin!</strong>
        </div>
    </div>

    <div class="layui-footer">
        by : 蒙大拿
    </div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script>


    function check(name){
        console.log(name);
        console.log(name.prev());
    }

    layui.use(['table','element'], function() {
        let $ = layui.$;
        let element = layui.element;
        $(function(){
            $("#topic-list-a").on("click",function(){

                layui.$.ajax({
                    url:"http://localhost:4000/web/topics",
                    //data:JSON.stringify(data),
                    type:"GET",
                    async:false,
                    headers:{'Accept':'application/json'},
                    dataType:"JSON",
                    contentType:"application/json;charset=UTF-8",
                    success:function(data){
                        let resultCode = data.resultCode;
                        if(resultCode == "SUCCESS"){
                            let result = data.data;
                            let content = "";
                            content = "<button id='addTopic' type='button' class='layui-btn layui-btn-radius'>默认按钮</button>";
                            content += "<table style='text-align: center' class='layui-table' lay-even='' lay-skin='row'>";
                            content += "<thead>"
                            content += "<tr>"
                            content += "<th style='text-align: center'>topic名称</th>"
                            content += "<th style='text-align: center'>topic下的topicGroup</th>"
                            content += "</tr>"
                            content += "</thead>"
                            content += "<tbody>"
                            for(let i=0;i<result.length;i++){
                                content += "<tr><td>"+result[i].topicName+"</td>";
                                content += "<td>"+result[i].groups+"</td></tr>";
                            }
                            content += "</tbody>";
                            content += "</table>";
                            console.log(data.data);
                            $("#content").html(content);
                        }
                    },
                    error:function(data){
                        layui.$.alert('发生未知错误',data.msg);
                    }
                });
            });



            $("#addTopic").on("click",function(){

            });

            return false;

            let table = layui.table;
            //第一个实例
            table.render({
                elem: '#log-table'
                ,method:"POST"
                ,url: 'http://localhost:4000/web/getAllTopics' //数据接口
                ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit','limits', 'count', 'prev','page','next', 'first','last','skip'] //自定义分页布局
                    ,limit:20
                    ,limits:[5,10,15,20]
                    ,groups: 5 //只显示 5 个连续页码
                }
                ,request:{
                    pageName:"pageCurrent",
                    limitName:"pageSize"
                }
                ,contentType:"application/json;charset=UTF-8"
                ,response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                ,id:"roleTable"
                ,cols: [
                    [
                        {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                        ,{field: 'createBy', title: '创建人id'}
                    ]
                ]
                ,parseData:function(data){
                    return {
                        "code": data.code, //解析接口状态
                        "msg": data.msg, //解析提示文本
                        "count": data.data.total, //解析数据长度
                        "data": data.data //解析数据列表
                    };
                }
            });


            //头工具栏事件
            table.on('toolbar(test-log)', function(obj){
                console.log(obj);
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                        break;

                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                };
            });

            $("#add-role").on("click",function(){

                layer.open({
                    type: 2, //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）,
                    title: 'title here',   //标题
                    area: ['650px', '600px'],   //宽高
                    shade: 0.4,   //遮罩透明度
                    content:"http://localhost:3040/index/system/roleSave",//支持获取DOM元素
                    btn: ['确定', '取消'], //按钮组
                    scrollbar: false ,//屏蔽浏览器滚动条
                    success:function(layero,index){
                        // 获取子页面的iframe
                        let iframe = window['layui-layer-iframe' + index];
                        // 向子页面的全局函数child传参
                        iframe.init(null);

                    },
                    yes: function(index,layero){//layer.msg('yes');    //点击确定回调
                        let iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象，执行iframe页的方法：
                        let result = iframeWin.getCheckedForParent();
                        if(result == null || result.length==0){
                            layer.msg("请选择角色权限！");
                            return false;
                        }
                        let r;
                        if(result.charAt(result.length-1)==","){
                            r = result.substring(0,result.length-1);
                        }
                        let ids = r.split(",");
                        console.log(ids);
                        let sId = iframeWin.document.getElementById("id").value;
                        let sName = iframeWin.document.getElementById("name").value;
                        let sNo = iframeWin.document.getElementById("no").value;
                        let data = {
                            "id":sId,
                            "name":sName,
                            "no":sNo,
                            "ids":ids
                        };

                        layui.$.ajax({
                            url:"http://localhost:3040/system/role/save",
                            data:JSON.stringify(data),
                            type:"POST",
                            async:false,
                            headers:{'Accept':'application/json','token':token},
                            dataType:"JSON",
                            contentType:"application/json;charset=UTF-8",
                            success:function(data){
                                let code = data.code;
                                if(code == 200){
                                    //执行重载
                                    //table.reload('roleTable', {});
                                    table.reload("roleTable",function(){
                                        page: {
                                            curr:1 //重新从第 1 页开始
                                        }
                                    });
                                    layer.close(index);
                                }else{
                                    layer.msg(data.msg);
                                }
                            },
                            error:function(data){
                                layui.$.alert('发生未知错误',data.msg);
                            }
                        });
                    }, btn2: function(){//layer.alert('aaa',{title:'msg title'});  ////点击取消回调
                        //layer.msg('bbb');//layer.closeAll();
                    }
                });



            });


            //监听行工具事件
            table.on('tool(test-log)', function(obj){
                let data = obj.data;
                console.log(obj)
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        layui.$.ajax({
                            url:"http://localhost:3040/system/role/remove?id="+obj.data.id,
                            data:null,
                            type:"GET",
                            async:false,
                            headers:{'Accept':'application/json','token':token},
                            dataType:"JSON",
                            contentType:"application/json;charset=UTF-8",
                            success:function(data){
                                let code = data.code;
                                if(code == 200){
                                    //执行重载
                                    //table.reload('roleTable', {});
                                    layer.msg(data.msg,function(){
                                        obj.del();
                                        layer.close(index);
                                    });
                                }else{
                                    layer.msg(data.msg);
                                }
                            },
                            error:function(data){
                                layui.msg(data.msg);
                            }
                        });
                    });
                } else if(obj.event === 'edit'){
                    layer.open({
                        type: 2, //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）,
                        title: 'title here',   //标题
                        area: ['650px', '600px'],   //宽高
                        shade: 0.4,   //遮罩透明度
                        content:"http://localhost:3040/index/system/roleSave",//支持获取DOM元素
                        btn: ['确定', '取消'], //按钮组
                        scrollbar: false ,//屏蔽浏览器滚动条
                        success:function(layero,index){
                            // 获取子页面的iframe
                            let iframe = window['layui-layer-iframe' + index];
                            // 向子页面的全局函数child传参
                            iframe.init(obj.data.id);

                        },
                        yes: function(index,layero){//layer.msg('yes');    //点击确定回调
                            let iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象，执行iframe页的方法：
                            //let ids = iframeWin.sendDataToParent();
                            let result = iframeWin.getCheckedForParent();
                            let r;
                            if(result.charAt(result.length-1)==","){
                                r = result.substring(0,result.length-1);
                            }
                            let ids = r.split(",");
                            console.log(ids);
                            let sId = iframeWin.document.getElementById("id").value;
                            let sName = iframeWin.document.getElementById("name").value;
                            let sNo = iframeWin.document.getElementById("no").value;
                            let data = {
                                "id":sId,
                                "name":sName,
                                "no":sNo,
                                "ids":ids
                            };

                            layui.$.ajax({
                                url:"http://localhost:3040/system/role/save",
                                data:JSON.stringify(data),
                                type:"POST",
                                async:false,
                                headers:{'Accept':'application/json','token':token},
                                dataType:"JSON",
                                contentType:"application/json;charset=UTF-8",
                                success:function(data){
                                    let code = data.code;
                                    if(code == 200){
                                        //执行重载
                                        //table.reload('roleTable', {});
                                        table.reload("roleTable",function(){
                                            page: {
                                                curr:1 //重新从第 1 页开始
                                            }
                                        });
                                        layer.close(index);
                                    }else{
                                        layer.msg(data.msg);
                                    }
                                },
                                error:function(data){
                                    layui.$.alert('发生未知错误',data.msg);
                                }
                            });
                        }, btn2: function(){//layer.alert('aaa',{title:'msg title'});  ////点击取消回调
                            //layer.msg('bbb');//layer.closeAll();
                        }
                    });
                }
            });
        });
    });

</script>
</body>
</html>